light mode
night mode
অ্যাজাক্স (Ajax)

Database থেকে ডেটা Fetch করে টেবিলে প্রদর্শন

Web Development - অ্যাজাক্স (Ajax) - Ajax এবং Database Interaction (Ajax এবং ডাটাবেস ইন্টিগ্রেশন) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এবং PHP ব্যবহার করে ডাটাবেস থেকে ডেটা ফেচ করে HTML টেবিলে প্রদর্শন করা একটি কার্যকরী পদ্ধতি, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ এবং রেসপন্সিভ করে তোলে। এই প্রক্রিয়ায়, Ajax এর মাধ্যমে ডাটাবেস থেকে ডেটা ফেচ করা হয় এবং সেই ডেটা HTML টেবিলে ডায়নামিকভাবে রেন্ডার করা হয়।

উদাহরণ: Ajax এর মাধ্যমে ডাটাবেস থেকে ডেটা Fetch করে HTML টেবিলে প্রদর্শন করা

১. HTML এবং JavaScript (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Data and Display in Table</title>
</head>
<body>
    <h1>Employee List</h1>
    <button onclick="fetchEmployeeData()">Fetch Employees</button>
    <table id="employee-table" border="1" style="width: 100%; margin-top: 20px; display: none;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Department</th>
            </tr>
        </thead>
        <tbody>
            <!-- ডেটা এখানে ডায়নামিক্যালি যোগ করা হবে -->
        </tbody>
    </table>

    <div id="response-container">
        <!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
    </div>

    <script>
        function fetchEmployeeData() {
            // XMLHttpRequest অবজেক্ট তৈরি করা
            var xhr = new XMLHttpRequest();

            // GET রিকোয়েস্ট ওপেন করা
            xhr.open("GET", "fetch_employees.php", true);

            // রেসপন্স হ্যান্ডলিং সেট করা
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হলে
                    if (xhr.status === 200) { // রিকোয়েস্ট সফল হলে
                        var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                        var table = document.getElementById("employee-table");
                        var tbody = table.querySelector("tbody");
                        tbody.innerHTML = ""; // পূর্বের ডেটা ক্লিয়ার করা

                        data.forEach(function(employee) {
                            var row = document.createElement("tr");
                            row.innerHTML = `<td>${employee.name}</td>
                                             <td>${employee.email}</td>
                                             <td>${employee.department}</td>`;
                            tbody.appendChild(row);
                        });

                        table.style.display = "table"; // টেবিল দেখানো
                    } else {
                        document.getElementById("response-container").innerHTML = "Error fetching data.";
                    }
                }
            };

            // ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
            xhr.onerror = function() {
                document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
            };

            // রিকোয়েস্ট পাঠানো
            xhr.send();
        }
    </script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি বোতাম (<button>) রয়েছে যা "Fetch Employees" নামে। এই বোতামে ক্লিক করলে fetchEmployeeData() ফাংশন কল হবে।
  • <table> এলিমেন্ট তৈরি করা হয়েছে যাতে ডাটাবেস থেকে প্রাপ্ত ডেটা HTML টেবিলে দেখানো যায়।
  • JavaScript: Ajax রিকোয়েস্ট পাঠানোর জন্য XMLHttpRequest অবজেক্ট ব্যবহার করা হয়েছে। রেসপন্স সফল হলে, JSON ডেটা প্রসেস করে HTML টেবিলে যোগ করা হয়।

২. PHP স্ক্রিপ্ট (fetch_employees.php):

<?php
// ডাটাবেস কানেকশন সেটআপ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    http_response_code(500); // Internal Server Error
    echo json_encode(["error" => "Database connection failed."]);
    exit();
}

// SQL কুয়েরি
$sql = "SELECT name, email, department FROM employees";
$result = $conn->query($sql);

// ডেটা রেসপন্স তৈরি করা
$employees = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $employees[] = $row;
    }
}

// JSON ফরম্যাটে হেডার সেট করা
header('Content-Type: application/json');

// JSON ফরম্যাটে ডেটা রিটার্ন করা
echo json_encode($employees);

// ডাটাবেস কানেকশন বন্ধ করা
$conn->close();
?>

বিস্তারিত ব্যাখ্যা:

  1. ডাটাবেস কানেকশন:
    • PHP স্ক্রিপ্টে ডাটাবেস কানেকশন সেটআপ করা হয়েছে, যেখানে MySQL সার্ভারের সাথে কানেক্ট করা হয়েছে।
  2. SQL কুয়েরি:
    • SELECT কুয়েরি ব্যবহার করে employees টেবিল থেকে name, email, এবং department কলামগুলো ফেচ করা হয়েছে।
  3. JSON ফরম্যাটে রেসপন্স:
    • ডেটা অ্যারে হিসাবে সংগ্রহ করা হয়েছে এবং json_encode() ফাংশন ব্যবহার করে JSON ফরম্যাটে রেসপন্স রিটার্ন করা হয়েছে।
    • PHP এর header('Content-Type: application/json'); দিয়ে JSON হেডার সেট করা হয়েছে, যাতে ব্রাউজার এবং ক্লায়েন্ট জানে যে এটি একটি JSON রেসপন্স।

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

  1. JavaScript এবং HTML:
    • ব্যবহারকারী যখন "Fetch Employees" বোতামে ক্লিক করে, তখন fetchEmployeeData() ফাংশন কল হয়।
    • ফাংশনটি একটি Ajax GET রিকোয়েস্ট পাঠায় fetch_employees.php এ।
  2. PHP স্ক্রিপ্ট:
    • PHP স্ক্রিপ্ট ডাটাবেস থেকে ইউজারদের ডেটা ফেচ করে এবং JSON ফরম্যাটে রেসপন্স করে।
  3. JavaScript JSON প্রসেসিং:
    • Ajax রিকোয়েস্ট সফল হলে, JSON ডেটা প্রসেস করা হয় এবং HTML টেবিলের টেবিল বডিতে ডাইনামিক্যালি রো যোগ করা হয়।

Ajax এবং Database Fetch এর মাধ্যমে টেবিলে ডেটা প্রদর্শনের সুবিধা:

  • পেজ রিফ্রেশ ছাড়াই ডেটা আপডেট: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ডাটাবেস থেকে ডেটা লোড এবং টেবিলে আপডেট করা যায়।
  • JSON ফরম্যাটে ডেটা রেসপন্স: PHP থেকে JSON ফরম্যাটে ডেটা পাঠানো হয়েছে, যা JavaScript এর মাধ্যমে সহজে প্রসেস করা যায়।
  • ডায়নামিক রেসপন্স: Ajax এর মাধ্যমে PHP স্ক্রিপ্ট এক্সিকিউট করে ডায়নামিক রেসপন্স পাওয়া যায় এবং তা টেবিলে দেখানো যায়।

সারসংক্ষেপ:

  • Ajax এবং PHP: Ajax এবং PHP এর মাধ্যমে ডাটাবেস থেকে ডেটা ফেচ করে টেবিলে দেখানো হয়েছে।
  • JavaScript এবং PHP Integration: JavaScript এর মাধ্যমে Ajax GET রিকোয়েস্ট পাঠানো হয়েছে এবং PHP স্ক্রিপ্ট সার্ভারে এক্সিকিউট করে ডেটা প্রদান করেছে।
  • Dynamic Data Display: ব্যবহারকারী পেজ রিলোড ছাড়াই টেবিলে ডেটা দেখতে এবং ইন্টারঅ্যাক্ট করতে পারে, যা ওয়েব অ্যাপ্লিকেশনকে আরও রেসপন্সিভ এবং ইন্টারেক্টিভ করে তোলে।

আরও দেখুন...

Database থেকে ডেটা Fetch করে টেবিলে প্রদর্শন

or

Don't have an account? Register

Promotion